import { create } from "zustand";
import axios from "axios";
import { useEffect } from "react";
const URL = "http://geek.itheima.net/v1_0/channels";

const useStore = create((set) => {
  return {
    channelList: [],
    // 异步方法
    fetchChannelList: async () => {
      const res = await axios.get(URL);
      set({ channelList: res.data.data.channels });
    }
  };
});
function App() {
  const { channelList, fetchChannelList } = useStore();
  useEffect(() => {
    fetchChannelList();
  }, [fetchChannelList]);
  return (
    <div className="App">
      hello zustand!
      <ul>
        {channelList.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;
